<template>
	<v-app>
		<v-main>
			<router-view />
			<!-- 左侧钱包余额显示 -->
		</v-main>
		<!-- Toast通知组件 -->
		<v-snackbar
			v-model="toast.show"
			:color="toast.color"
			:timeout="toast.timeout"
			location="top"
		>
			{{ toast.message }}
			<template v-slot:actions>
				<v-btn
					color="white"
					variant="text"
					@click="toast.show = false"
				>
					关闭
				</v-btn>
			</template>
		</v-snackbar>
	</v-app>
</template>

<script>

export default {
	name: 'App',
	components: {
	},
	data() {
		return {
			toast: {
				show: false,
				message: '',
				color: 'success',
				timeout: 3000
			}
		}
	},
	mounted() {
		// 监听全局Toast事件
		this.$toast = {
			success: (message, timeout = 3000) => {
				this.toast.message = message
				this.toast.color = 'success'
				this.toast.timeout = timeout
				this.toast.show = true
			},
			error: (message, timeout = 3000) => {
				this.toast.message = message
				this.toast.color = 'error'
				this.toast.timeout = timeout
				this.toast.show = true
			},
			warning: (message, timeout = 3000) => {
				this.toast.message = message
				this.toast.color = 'warning'
				this.toast.timeout = timeout
				this.toast.show = true
			},
			info: (message, timeout = 3000) => {
				this.toast.message = message
				this.toast.color = 'info'
				this.toast.timeout = timeout
				this.toast.show = true
			}
		}
		
		// 将Toast方法挂载到全局
		this.$root.$toast = this.$toast
	}
}
</script>

<!-- 这里是共通样式，适用于所有组件，所以不要加scoped -->
<style>
	html,
	body,
	div,
	span,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	ol,
	li,
	p {
		margin: 0;
		padding: 0;
	}

	html,
	body {
		width: 100%;
		height: 100%;
		font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	}

	#app {
		width: 100%;
		min-height: 100%;
		font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	}

	ul,
	ol {
		list-style: none;
	}

	a {
		text-decoration: none;
	}

	/* Material Design 全局样式 */
	.v-application {
		font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
	}

</style>
